@rootSize: 37.5rem;


body {
    background-color: #fdfdfd;

}

.main {
    padding: (12 / @rootSize) (15 / @rootSize);
    width: (375 / @rootSize);

    // 顶部
    .top {
        position: fixed;
        top: 0;
        z-index: 999;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: (46 / @rootSize);
        width: (345 / @rootSize);
        background-color: #ffffff;

        .address {
            font-size: (14 / @rootSize);
            height: (32 / @rootSize);
            width: (28 / @rootSize);
            color: #191919;
            font-weight: 500;
            line-height: (32 / @rootSize);
            // background-color: aqua;
        }

        .search {
            display: flex;
            align-items: center;
            width: (249 / @rootSize);
            height: (32 / @rootSize);
            background-color: #f0f0f0;
            border-radius: (14/ @rootSize);
            color: #a1a1a1;

            i {
                margin-left: (16 / @rootSize);
            }

            p {
                margin-left: (10 / @rootSize);
                font-size: (12 / @rootSize);
            }

        }

        .news {
            height: (23 / @rootSize);
            width: (22 / @rootSize);
            margin-bottom: 11px;

            // background-color: aqua;
            img {
                height: 100%;
                width: 100%;
                object-fit: cover;
            }
        }
    }

    // 内容
    .content {
        width: 100%;
        overflow: hidden;
        height: (224 / @rootSize);
        margin-top: (65 / @rootSize);

        .banner {
            width: 100%;
            height: (130 / @rootSize);
            box-shadow: (0 / @rootSize) (1 / @rootSize) (1 / @rootSize) (1 / @rootSize) rgba(0, 0, 0, .1);

            // box-shadow: #e1e1e1;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: (5 / @rootSize);
            }

            .dot {

                display: flex;
                width: (85 / @rootSize);
                margin: (8 / @rootSize) auto;

                .s1 {
                    height: (3 / @rootSize);
                    width: (8 / @rootSize);
                    border-radius: (3 / @rootSize);
                    background-color: #303030;
                }

                .s2 {
                    height: (3 / @rootSize);
                    width: (4 / @rootSize);
                    background-color: #dfdfdf;
                    border-radius: (2 / @rootSize);

                }

                .s3 {
                    margin: 0 (8 / @rootSize);
                }

            }
        }

        .pic-tow {

            img {
                box-shadow: (1 / @rootSize) (1 / @rootSize) (2 / @rootSize) (1 / @rootSize) rgba(0, 0, 0, .1);
                margin-top: (12 / @rootSize);
                width: (167 / @rootSize);
                height: (70 / @rootSize);
                object-fit: cover;
            }
        }



    }

    // 超值优惠
    .youhui {
        margin-top: (36 / @rootSize);
        width: (345 / @rootSize);
        height: (243 / @rootSize);
        background-color: #fff;

        .y-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: (8 / @rootSize);
            width: (345 / @rootSize);
            margin-bottom: (30 / @rootSize);

            h4 {
                color: #131313;
                font-size: (20 / @rootSize);
            }

            img {
                width: (8 / @rootSize);

            }
        }

        .y-room {
            display: flex;
            justify-content: space-between;

            .left {

                img {
                    width: (167.5 / @rootSize);
                }

                h4 {
                    font-size: (20 / @rootSize);
                    margin: (8 / @rootSize) 0;
                }

                p {
                    font-size: (13 / @rootSize);
                    color: #a6a6a6;
                }

                span {
                    margin-top: (12 / @rootSize);
                    font-size: (14 / @rootSize);
                    color: #e7961f;
                    font-weight: 500;
                }

            }
        }
    }

    // 广告banner
    .banner2 {
        width: 100%;
        height: (56 / @rootSize);
        margin-top: (30 / @rootSize);

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: (5 / @rootSize);
        }
    }

    //推荐模块
    .tuijian {
        width: 100%;

        .t-top {
            position: relative;
            margin-top: (36 / @rootSize);
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: (24 / @rootSize);
            height: 100%;

            h4 {
                color: #101010;
            }

            span {
                // width: (70 / @rootSize);
                display: flex;
                font-size: (14 / @rootSize);
                color: #909090;
            }

            .bar {
                position: absolute;
                right: (62 / @rootSize);
                bottom: 0;
                width: (8 / @rootSize);
                height: (2 / @rootSize);
                border-radius: (3 / @rootSize);
                background-color: #429ce6;
            }

            p {

                padding: 0 (8 / @rootSize);
                font-weight: 600;
            }

            .active {
                color: #101010;
            }
        }

        .t-list {
            margin-top: (36 / @rootSize);

            ul {

                li {
                    height: (94 / @rootSize);
                    margin-bottom: (36 / @rootSize);

                    a {
                        display: block;
                        display: flex;
                        color: #101010;

                        img {
                            margin-right: (16 / @rootSize);

                            width: (108 / @rootSize);
                            height: (81 / @rootSize);
                        }

                        .text {
                            h4 {
                                font-size: (14 / @rootSize);
                            }

                            p {
                                margin-top: (6/ @rootSize);
                                font-size: (12 / @rootSize);
                                color: #919191;
                            }

                            .type {
                                display: flex;

                                p {
                                    margin-top: (8/ @rootSize);
                                    width: (45 / @rootSize);
                                    height: (16 / @rootSize);
                                    text-align: center;
                                    line-height: (16 / @rootSize);
                                    border: 1px solid #d7d7d7;
                                    border-radius: (4 / @rootSize);
                                    margin-right: (10 / @rootSize);
                                    font-size: (12 / @rootSize);
                                }
                            }

                            span {
                                margin-top: (8/ @rootSize);
                                font-size: (14 / @rootSize);
                                color: #e69629;

                                i {
                                    font-size: (16 / @rootSize);
                                    font-weight: 600;
                                }
                            }
                        }
                    }
                }
            }
        }
    }


    // 底部的搜索框
    .btm-search {
        margin: (6 / @rootSize) auto (24 / @rootSize);
        width: (240 / @rootSize);
        height: (38 / @rootSize);
        background-color: #f2f2f3;
        border-radius: (20 / @rootSize);

        p {
            font-size: (12 / @rootSize);
            color: #a6a6a6;
            text-align: center;
            line-height: (38 / @rootSize);
        }
    }

    // .kongbai {
    //     height: 500px;
    //     width: 100%;
    // }


    // 底部banner
    .banner3 {
        width: 100%;
        height: (86 / @rootSize);
        margin-top: (24 / @rootSize);
        margin-bottom: (52 / @rootSize);

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: (5 / @rootSize);
        }
    }

    // 底部
    .bottom {
        height: (50 / @rootSize);
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 999;
        display: flex;
        width: (375 / @rootSize);
        background-color: #ffffff;
        // background-color: pink;
        box-shadow: (3 / @rootSize) (2 / @rootSize) (2 / @rootSize) (3 / @rootSize) rgba(0, 0, 0, .2);

        ul {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;

            li {
                a {
                    display: block;
                    width: (80 / @rootSize);
                    height: (50 / @rootSize);
                    text-align: center;
                    line-height: (25 / @rootSize);
                    // background-color: silver;
                    color: #c6c6c6;

                    i {
                        margin-top: (5 / @rootSize);
                        font-size: (18 / @rootSize);
                    }

                    p {
                        font-size: (12 / @rootSize);
                    }

                }

                .active {
                    color: #232323;
                }

            }

        }

    }
}